<template>
    <div class="left content">
        <h3>视角管理</h3>
        <button @click="addTerrain">地形</button>
        <button @click="addLayer">影像</button>
        <button @click="addLabTileset">3DTileset</button>
        <hr>
        <h3>视角管理</h3>
        <button @click="showRef = !showRef">视角管理器2</button>
    </div>
    <div style="position: fixed; bottom: 100px; left: 50%;transform: translateX(-50%);" v-show="showRef">
        <ESCameraViewsPlayer :sceneObject="pm.cameraViewsManager"></ESCameraViewsPlayer>
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { views } from "./views";
import { ESCameraViewsPlayer } from "earthsdk-ui";
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { ES3DTileset, ESImageryLayer, ESTerrainLayer } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const showRef = ref(false);
const pm = getMyProjectManager();
//视角赋值
pm.cameraViewsManager.views = [...views];


let labTerrain, labLayer, labTileset;

const addTerrain = () => {
    if (labTerrain) {
        labTerrain.flyTo();
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ESTerrainLayer);
    if (!sceneObject) return;
    labTerrain = sceneObject;
    sceneObject.url = "http://192.168.0.115:9004/tile/terrain/ChdD3xQ2/layer.json";
    sceneObject.rectangle = [
        113.999720, 26.999674,
        115.000162, 28.000116
    ];
    sceneObject.flyTo();
}

const addLayer = () => {
    if (labLayer) {
        labLayer.flyTo();
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ESImageryLayer);
    if (!sceneObject) return;
    labLayer = sceneObject;
    sceneObject.url = "http://192.168.0.115:9004/tile/image/wmts/nantong-image/{z}/{x}/{y}";
    sceneObject.zIndex = 1;
    sceneObject.rectangle = [
        121.06322908245195,
        31.794541156058422,
        121.06749023873518,
        31.797868621693333
    ];
    sceneObject.flyTo();
}

const addLabTileset = () => {
    if (labTileset) {
        labTileset.flyTo();
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ES3DTileset);
    if (!sceneObject) return;
    labTileset = sceneObject;
    sceneObject.url = 'http://192.168.0.115:9004/tile/model/service/UuBhHuQL/tileset.json';
    sceneObject.d(sceneObject.czmTilesetReadyEvent.donce(() => {
        sceneObject.flyTo();
        Message.success("ES3DTileset 加载完成!");
    }));
}

const removeLayer = () => {
    labLayer && pm.destroySceneObject(labLayer);
    labTerrain && pm.destroySceneObject(labTerrain);
    labTileset && pm.destroySceneObject(labTileset);
    labLayer = labTileset = labTerrain = null;
}

onBeforeUnmount(() => {
    showRef.value = false;
    pm.cameraViewsManager.playing = false;
    removeLayer();
})

</script>

<style scoped>
.left {
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
}

.content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.content button {
    padding: 10px 50px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>
